<%--
  Created by IntelliJ IDEA.
  User: liye
  Date: 2022/3/5
  Time: 15:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>站点管理 - 站点列表</title>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="container">
        <h1>站点管理</h1>
        <form class="form-inline">
            <label>网站名称</label>
            <input class="form-control" name="siteName" type="text">

            <label>所属国家</label>
            <select class="form-control" name="country">
                <option value="ALL">全部</option>
            </select>

            <button id="btn-search" type="button" class="btn btn-default">查询</button>
            <a href="/website/add" class="btn btn-link">去添加站点</a>
        </form>
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>序号</th> <th>站点名称</th> <th>地址</th>
                    <th>访问排名</th> <th>所属国家</th> <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

        <%--添加一个分页插件--%>
        <div class="nav">
            <ul class="pagination">
                <!--<li>
                    <a>上一页</a>
                </li>
                <li><a>1</a></li>
                <li class="active"><a>2</a></li>
                <li><a>3</a></li>
                <li><a>4</a></li>
                <li><a>5</a></li>
                <li><a>6</a></li>
                <li>
                    <a>下一页</a>
                </li>-->
            </ul>
        </div>
    </div>

    <script type="text/javascript">
        //声明全局变量
        var name, country, pageNum, pageSize;//分别缓存查询的站点名、国家、页码、每页显示的条数

        $(function() {
            loadData();//网页打开时先查一次数据

            //为查询按钮绑定 click 函数
            $("#btn-search").click(function () {
                name = $("input[name=siteName]").val();//取出输入框中的内容
                country = $("select[name=country]").val();//获取下拉框中的国家
                $("tbody").empty();
                loadData(name, country);
            });

            //获取国家列表，添加到下拉框
            $.get(
                "/website/countryList",
                function(data) {
                    for (var i in data) {
                        var option = $("<option></option>")
                        option.text(data[i]);
                        option.val(data[i]);
                        $("select[name=country]").append(option);
                    }
                }
            );
            //当重新选择国家自动查询
            $("select[name=country]").change(function () {
                $("#btn-search").click();
            });
        });

        function loadData(siteName, country) {
            $.get(
                "/website/list",
                {"name":siteName, "country":country, "pn":pageNum, "ps":pageSize},//查询条件，暂时空着
                function(data) {
                    var list = data.list;//获取数据集
                    for (var i in list) {
                        var tr = $("<tr></tr>");
                        tr.append("<td>" + list[i].id + "</td>");
                        tr.append("<td>" + list[i].name + "</td>");
                        tr.append("<td>" + list[i].url + "</td>");
                        tr.append("<td>" + list[i].alexa + "</td>");
                        tr.append("<td>" + list[i].country + "</td>");
                        var tdOpt = $("<td></td>");
                        tdOpt.append("<a class='btn btn-link btn-acc'>去访问</a>");
                        tdOpt.append("<button class='btn btn-danger btn-del'>删除</button>");
                        tr.append(tdOpt);

                        $("tbody").append(tr);
                    }
                    //点击访问按钮，xxxx
                    $("tbody .btn-acc").click(function () {
                        var tr = $(this).parents("tr");//待访问站点的行
                        var id = tr.children("td").eq(0).text();//获取站点ID
                        var url = tr.children("td").eq(2).text();//获取站点地址
                        $.post(
                            "/website/access",
                            {"siteId": id}
                        );

                        window.open(url);//在新标签页打开这个站点
                    });

                    //为删除按钮添加点击事件
                    $("tbody .btn-del").click(function () {
                        var tr = $(this).parents("tr");//待删除的行
                        var id = tr.children("td").eq(0).text();//获取站点ID
                        var name = tr.children("td").eq(1).text();//获取站点名称
                        if (confirm("确定要删除站点：" + name + "?")) {
                            $.post(
                                "/website/delete",
                                {"id":id},
                                function(data) {
                                    if (data=='success') {
                                        alert("删除成功！");
                                        $("#btn-search").click();//刷新表格
                                    } else {
                                        alert("删除失败！");
                                    }
                                }
                            );
                        }
                    });

                    startPage(data);//开始分页
                }
            );
        }

        function startPage(pageInfo) {
            $(".pagination").empty();//在每次重新分页之前先清空分页列表
            if (pageInfo.hasPreviousPage) {//确定有没有上一页
                var li = $("<li><a href='#'>上一页</a></li>");
                $(".pagination").append(li);//在分页列表里添加分页项
                li.attr("data-pn", pageInfo.prePage);
            }
            for (var i in pageInfo.navigatepageNums) {
                var li = $("<li><a href='#'>" + pageInfo.navigatepageNums[i] + "</a></li>");
                if (pageInfo.navigatepageNums[i] == pageInfo.pageNum) {
                    li.addClass("active");
                }
                li.attr("data-pn", pageInfo.navigatepageNums[i]);
                $(".pagination").append(li);//在分页列表里添加分页项
            }
            if (pageInfo.hasNextPage) {//确定有没有下一页
                var li = $("<li><a href='#'>下一页</a></li>");
                li.attr("data-pn", pageInfo.nextPage);
                $(".pagination").append(li);//在分页列表里添加分页项
            }

            $(".pagination>li").click(function () {
               pageNum = $(this).attr("data-pn");
               $("#btn-search").click();
            });
        }
    </script>
</body>
</html>
